<template>
  <div class="common-layout">
    <el-container class="layout-container">
      <el-aside :width="isCollapse ? '3.5vw' : '14vw'" class="aside">
        <div class="title">
          <span v-if="!isCollapse">{{ t('conf.chatListMyConferences') }}</span>
          <div v-else>{{ t('conf.chatListMyConferences').substring(0, 1) }}</div>
        </div>
        <el-menu
          :default-active="activeMenu"
          class="menu"
          :collapse="isCollapse"
          background-color="#fff"
          text-color="#333"
          active-text-color="#409EFF"
          router
        >
          <el-menu-item index="/home/myConf/mine">
            <el-icon><User /></el-icon>
            <template #title>{{ t('mine.title') }}</template>
          </el-menu-item>
          <el-menu-item index="/home/myConf/list">
            <el-icon><List /></el-icon>
            <template #title>{{ t('conf.chatListConferenceList') }}</template>
          </el-menu-item>
          <el-menu-item index="/home/myConf/files">
            <el-icon><Files /></el-icon>
            <template #title>{{ t('conf.chatListConferenceDocuments') }}</template>
          </el-menu-item>
          <el-menu-item index="/home/myConf/video">
            <el-icon><VideoCamera /></el-icon>
            <template #title>{{ t('conf.chatListMyRecordings') }}</template>
          </el-menu-item>
          <el-menu-item index="/home/myConf/asistant">
            <el-icon><ElementPlus /></el-icon>
            <template #title>{{ t('conf.chatListConferenceHelper') }}</template>
          </el-menu-item>
        </el-menu>
        <div class="collapse-btn" @click="toggleCollapse">
          <el-icon><Fold v-if="!isCollapse" /><Expand v-else /></el-icon>
        </div>
      </el-aside>
      <el-container>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
  <script setup lang="ts">
  import {t} from '../../locales'
  import { ref ,watchEffect} from 'vue';
  import { useRoute } from 'vue-router';
  import {User,List,Files,VideoCamera,ElementPlus,Fold,Expand} from '@element-plus/icons-vue'
  const isCollapse=ref(false)
  const activeMenu=ref('/home/myConf/mine')
  const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}
const route=useRoute()
watchEffect(()=>{

    // 基于路由的基础路径或前缀设置 activeMenus
    if (route.path.startsWith('/home/myConf/files')) {
    activeMenu.value = '/home/myConf/files';  // 例如，所有与 "files" 相关的页面都指向该菜单项
  } else if (route.path.startsWith('/home/myConf/list')) {
    activeMenu.value = '/home/myConf/list';  // 处理其他路径
  } else if(route.path.startsWith('/home/myConf/asistant')){
    activeMenu.value = '/home/myConf/asistant';  // 处理其他路径
  }
  else {
    activeMenu.value = route.path;  // 默认使用当前路径
  }

})

  </script>
  
  <style scoped lang="scss">
  .layout-container{
    overflow: auto;
    min-height: 90vh;
    max-height: 90vh;
    
    display: flex;
  }
  .aside{
 
    max-height: 90vh;
    background-color: #fff;
    border-right: 1px solid #e6e6e6;
    transition: width 0.3s;
    position: relative;
    overflow: hidden;
    
    
    .title{
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 20px;
      border-bottom: 1px solid #e6e6e6;
      span{
        font-size: 16px;
        font-weight: bold;
      }
    }
    .menu{
      
      border-right: none;
     
      text-align: center;
      
    }
    .collapse-btn{
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 32px;
      height: 32px;
      display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #f5f7fa;
    border-radius: 50%;
    &:hover{
      background-color: #e6e8eb;
    }
    }
  }
  .main{
     background-color: #f5f7fa;
  padding: 20px;
  }

  </style>
  